<template>
  <div class="cityInfo">
    <!--top开始-->
    <div class="CityTop">
      <div class="slideImg">
        <img src="../../assets/images/bannercity.png" alt="" width="100%">
      </div>
      <h1 class="slideTit">新冠肺炎疫情</h1>
      <h3 class="slideSubTit">{{ cityname }}实时动态追踪</h3>
      <div class="backHome" @click="backHome">
        疫情首页
      </div>
    </div>
    <!--CityData开始-->
    <div class="CityData">
      <div class="C_title">
        <b>{{ cityname }}</b>
        {{ times }}(北京时间）数据统计
      </div>
      <div class="C_data">
        <ul>
          <li>
            <div class="Infoshow">现存确诊</div>
            <span>{{ econNum }}</span>
            <h4>较昨日 <b style="color: #666;">未公布</b></h4>
          </li>
          <li>
            <div class="Infoshow">累计确诊</div>
            <span>{{ conNum }}</span>
            <h4>较昨日 <b style="color: #666;">未公布</b></h4>
          </li>
          <li>
            <div class="Infoshow">累计死亡</div>
            <span>{{ deathNum }}</span>
            <h4>较昨日 <b style="color: #666;">未公布</b></h4>
          </li>
          <li>
            <div class="Infoshow">无症状数</div>
            <span style="height: 49px">{{ asymptomNum }}</span>
          </li>
          <li>
            <div class="Infoshow">累计治愈</div>
            <span>{{ cureNum }}</span>
            <h4>较昨日 <b style="color: #666;">未公布</b></h4>
          </li>
        </ul>
      </div>
    </div>
    <!--testImg开始-->
    <div class="testImg">
      <div class="te-img">
        <img src="../../assets/images/testImg.png" alt="" width="100%">
      </div>
    </div>
    <!--map开始-->
    <div class="map">
      <div class="map-title">
        {{ cityname }}{{ indexs > 0 ? '积累' : '现存' }}确诊疫情地图
      </div>
      <div id="main" style="width: 7.5rem; height: 9rem"></div>
    </div>
    <!--city病例开始-->
    <div class="info">
      <div class="in-show">
        <div class="info-title">
          {{ cityname }}病例
        </div>
        <div class="info-cov" ref="info_data">
          <van-row gutter="1" class="cov-row">
            <van-col span="4">
              <div class="cov-title">地区</div>
            </van-col>
            <van-col span="4">
              <div class="cov-title">现存确诊</div>
            </van-col>
            <van-col span="4">
              <div class="cov-title">累计确诊</div>
            </van-col>
            <van-col span="4">
              <div class="cov-title">死亡</div>
            </van-col>
            <van-col span="4">
              <div class="cov-title">治愈</div>
            </van-col>
            <van-col span="4">
              <div class="cov-title">疫情</div>
            </van-col>
          </van-row>
          <!--地区疫情数据-->
          <van-row
              gutter="2"
              v-for="item in city"
              :key="item.name"
              class="cov-row cov-bg"
          >
            <van-col span="4">
              <div class="item">{{ item.name }}</div>
            </van-col>
            <van-col span="4">
              <div class="item">{{ item.econNum }}</div>
            </van-col>
            <van-col span="4">
              <div class="item">{{ item.conNum }}</div>
            </van-col>
            <van-col span="4">
              <div class="item">{{ item.deathNum }}</div>
            </van-col>
            <van-col span="4">
              <div class="item">{{ item.cureNum }}</div>
            </van-col>
            <van-col span="4">
              <div class="item"><a href="##" style="color: #029cdb">详情</a></div>
            </van-col>
          </van-row>
        </div>
      </div>
      <!--city病例结束-->
      <TipCoList/>
    </div>
  </div>
</template>

<script>
import api from "../../api/index";
import TipCoList from "../CovList/TipCoList";

export default {
  name: 'CitysInfo',
  props: ["cityname", "indexs"],
  data() {
    return {
      times: '', //时间
      econNum: '',//现存确诊
      conNum: '',//积累确诊
      deathNum: '',//积累死亡
      asymptomNum: '',//无症状数
      cureNum: '', //积累治愈
      city: []//各个省的城市数据

    }
  },
  methods: {
    backHome() {
      this.$router.push({
        name: 'home'
      })
    },
    handleScroll() {
      // covList下城市信息距离Home的距离
      this.covInfotop = this.$refs.info_data.offsetTop
      //页面滑动距离
      this.scrolltop = document.documentElement.scrollTop || document.body.scrollTop
      if (this.scrolltop + 1 > this.covInfotop) {
        document.querySelector(".colist").style.display = 'block'
      } else {
        document.querySelector(".colist").style.display = 'none'
      }
    }
  },
  components:{
    TipCoList
  },
  mounted() {
    console.log(this.indexs);
    //获取城市接口数据-----------
    api.getCity().then((res) => {
      console.log("--城市数据----", res.data.data.list);
      this.times = res.data.data.times;//时间
      let citys = res.data.data.list;//各个省数据、
      citys.forEach(item => {
        if (this.cityname === item.name) {
          this.econNum = item.econNum//现存确诊
          this.conNum = item.value//积累确诊
          this.deathNum = item.deathNum//积累死亡
          this.asymptomNum = item.asymptomNum//无症状数
          this.cureNum = item.cureNum//积累治愈
          this.city = item.city//各个省的城市数据
          let newArr = [];//积累确诊的data
          let extantArr = [];//现存确诊的data
          this.city.forEach((ele) => {
            let newobj = {};//积累的对象
            let extantobj = {};//现存的对象
            newobj.name = ele.mapName;
            extantobj.name = ele.mapName;
            newobj.value = ele.conNum; //累计确诊
            extantobj.value = ele.econNum; //现存确诊
            newArr.push(newobj);
            extantArr.push(extantobj);

          });
          if (this.indexs > 0) {
            this.$myChart.cityMap("main", item.name, newArr,this.indexs);
          } else {
            this.$myChart.cityMap("main", item.name, extantArr,this.indexs);
          }

        }
      })
    });
    window.addEventListener('scroll', this.handleScroll);
  },
//销毁页面距离监听
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  }
};
</script>

<style scoped>
/*top开始样式*/
.CityTop {
  position: relative;

}

.CityTop .slideTit {
  position: absolute;
  font-family: PingFangSC-Regular;
  color: #fff;
  font-size: .24rem;
  top: 0.85rem;
  left: 0.3rem;
}

.CityTop .slideSubTit {
  position: absolute;
  font-family: PingFangSC-Semibold;
  font-size: .5rem;
  color: #fff;
  text-shadow: 0 0.04rem 0 #e9a078;
  top: 1.2rem;
  left: 0.3rem;
}

.CityTop .backHome {
  position: absolute;
  font-family: PingFangSC-Regular;
  color: #111;
  font-size: .24rem;
  width: 1.59rem;
  height: 0.53rem;
  text-align: center;
  line-height: .53rem;
  bottom: 0.31rem;
  left: 0.4rem;
  border-radius: 0.27rem;
  background: #f8f8f8;
  padding-right: 0.2rem;
}

.CityTop .backHome:after {
  content: "";
  position: absolute;
  top: 0.18rem;
  right: 0.1rem;
  margin: 0 0.1rem 0 0.07rem;
  width: 0.09rem;
  height: 0.15rem;
  line-height: .15rem;
  background: url(../../assets/images/Cityjian.png) no-repeat 50%;
  background-size: contain;
}

/*top结束样式*/

/*Citydata开始样式*/
.CityData {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color: #f8f8f8;
  border-bottom: 0.16rem solid #f8f8f8;
}

.CityData .C_title {
  width: 100%;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  color: #777;
  font-size: 0.24rem;
}

.CityData .C_title b {
  background-color: #4d79f3;
  height: 0.35rem;
  color: #fff;
  font-size: 0.26rem;
  border-radius: 0.05rem;
  margin-right: 0.1rem;
  font-weight: 700;
  padding: 0 0.12rem;
}

.CityData .C_data ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0.3rem 0;
  margin: 0 0.3rem;
  background: #fff;
}

.CityData .C_data li {
  display: flex;
  width: 33%;
  flex-wrap: wrap;
  text-align: center;
  margin-bottom: 0.3rem
}

.CityData .C_data li .Infoshow {
  width: 100%;
  font-size: 0.2rem;
}

.CityData .C_data li span {
  width: 100%;
  font-size: 0.42rem;
  font-weight: bold;
  display: block;
  padding-top: 0.1rem;
}

.CityData .C_data li:nth-child(1) span {
  color: #CC8933;
}

.CityData .C_data li:nth-child(2) span {
  color: #ff3535;
}

.CityData .C_data li:nth-child(3) span {
  color: #b10000;
}

.CityData .C_data li:nth-child(4) span {
  color: #A64CBF;
}

.CityData .C_data li:nth-child(5) span {
  color: #13b593;
}

.CityData .C_data li h4 {
  width: 100%;
  display: block;
  line-height: 0.4rem;
  font-size: 0.2rem;
  color: #999;
}

/*Citydata结束样式*/

/*testimg开始*/
.testImg {
  width: 100%;
  background-color: #f8f8f8;
  border-bottom: 0.1rem solid #f8f8f8;
}

.testImg .te-img {
  margin: 0 0.3rem 0.16rem;
}

/*testimg结束*/

/*map开始*/
.map {
  background-color: #f8f8f8;
}

.map-title {
  margin: 0.2rem;
  padding-top: 0.2rem;
  font-size: 0.32rem;
  color: #4d79f3;
  font-weight: bold;
}

.map-title::before {
  content: "";
  border-left: 0.1rem solid rgb(9, 60, 202);
  font-size: 0.32rem;
  margin-right: 0.1rem;
  border-radius: 0.04rem;
}
/*map结束*/

/*数据info开始*/
.info{
  background-color:#f8f8f8 ;
}
.info .in-show{
  margin: 0 16px;
  background-color: #ffff;
}
.info-title {
  margin: 0.2rem;
  padding-top: 0.2rem;
  font-size: 0.32rem;
  color: #4d79f3;
  font-weight: bold;
}

.info-title::before {
  content: "";
  border-left: 0.1rem solid rgb(9, 60, 202);
  font-size: 0.32rem;
  margin-right: 0.1rem;
  border-radius: 0.04rem;
}

.info .info-cov .cov-row {
  text-align: center;
  line-height: 0.6rem;
  font-size: 0.26rem;
}

.info .info-cov .cov-row .van-col:nth-child(1) .cov-title {
  background: #e3e7f3;
}

.info .info-cov .cov-row .van-col:nth-child(2) .cov-title {
  background: #f3bab0;
}

.info .info-cov .cov-row .van-col:nth-child(3) .cov-title {
  background: #e69a8d;
}

.info .info-cov .cov-row .van-col:nth-child(4) .cov-title {
  background: #b4c0d5;
}

.info .info-cov .cov-row .van-col:nth-child(5) .cov-title {
  background: #95db9a;
}

.info .info-cov .cov-row .van-col:nth-child(6) .cov-title {
  background: #e3e7f3;
}
</style>
